<template>
    <div class="main-container">
        <el-container>
            <!-- 侧边Menu导航 -->
            <transition name="fade">
                <el-aside width="200px" v-show="isShowAside">
                    <div class="app-tag">
                        Domain-Backstage
                    </div>
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="1" text-color="#fff" router @open="handleOpen" @close="handleClose">
                        <!-- 菜单选项 -->
                        <el-sub-menu :index="item.menuUrl + ''" v-for="item in data.menuList" :key="item.menuId">
                            <!-- 标题 -->
                            <template #title>
                                <el-icon>
                                    <Location />
                                </el-icon>
                                <span>{{ item.menuName }}</span>
                            </template>
                            <el-menu-item-group :title="citem.menuDesc" v-for="citem in item.children" :key="citem.menuId">
                                <el-menu-item :index="citem.menuUrl + ''">{{ citem.menuName }}</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
            </transition>

            <el-container class="mian-right-box">
                <!-- 头部标题 -->
                <el-header>
                    <!-- 收放侧边栏 -->
                    <div class="show-aside">

                        <el-tooltip class="box-item" effect="dark" content="单击收放侧边菜单" placement="right">
                            <el-icon @click="asideOption">
                                <Menu />
                            </el-icon>
                        </el-tooltip>
                    </div>
                    <!-- 右侧工具栏 -->
                    <div class="header-utils">
                        <el-dropdown>
                            <!-- 头像 -->
                            <span class="el-dropdown-link">
                                <div class="block">
                                    <el-avatar :size="30" :src="state.circleUrl" />
                                    <div class="username">{{ data.userInfo.nickName }}</div>
                                </div>
                            </span>
                            <!-- 下拉选项 -->
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="a">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="b">账户设置</el-dropdown-item>
                                    <el-dropdown-item command="c">修改密码</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <!-- 退出登录 -->
                        <div class="login-out" @click="handleLoginOutButton"><el-icon>
                                <SwitchButton />
                            </el-icon>退出登录</div>
                    </div>
                </el-header>
                <!-- 主题内容 -->
                <el-main><router-view /></el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
// 导入
import { Menu, SwitchButton, Location } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, toRef } from 'vue';
import { useRouter } from 'vue-router';
import { getUserInformation, getMenuByRoleId } from '@/api/UserApi';
import { ElMessage, ElMessageBox } from 'element-plus';

//变量
let isShowAside = ref(true);
const userId: any = ref(0);
const data = reactive({
    userInfo: { nickName: "", roleId: 0 }, //角色信息
    menuList: { menuId: 0 }, // 菜单
})

// 挂载生命周期
onMounted(() => {
    userId.value = window.localStorage.getItem("userId");
    getUserInfoByUserId(userId.value);
})

/**
 * 获取菜单
 */
const getMenu = async () => {
    await getMenuByRoleId(data.userInfo.roleId).then(res => {
        data.menuList = res.data;
    })
}

/**
 * 获取用户信息
 * @param userId 
 */
const getUserInfoByUserId = async (userId: Number) => {
    await getUserInformation(userId).then(res => {
        if (res.code == 200) {
            data.userInfo = res.data;
            ElMessage({
                message: `欢迎您，${res.data.nickName}`,
                type: 'success',
            })

        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }

        // 获取菜单
        getMenu();
    })
}

// 头像
const state = reactive({
    circleUrl:
        'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    sizeList: ['small', '', 'large'] as const,
})

const router = useRouter();

// 是否展示侧边菜单栏
const asideOption = () => {
    isShowAside.value = !isShowAside.value
}


// 展开Aside
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

// 关闭Aside
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

// 退出登录
const handleLoginOutButton = () => {
    // 路由跳转到登录页面
    // 

    ElMessageBox.confirm('点击确定按钮，您将会退出系统，是否确定？',
        '退出系统',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功！',
            })
            router.push('/login');
        })
}
</script>

<style scoped lang="less">
// 侧边菜单收放动画调整
.fade-enter-active {
    transform: translateX(0);
    transition: all 0.1s;
}

.fade-leave-active {
    transform: translateX(-200px);
    transition: all 0.1s;
}

// 展开侧边菜单的按钮样式
.show-aside .el-icon {
    cursor: pointer;
    color: #999;
}

.show-aside .el-icon:hover {
    color: #323b45;
}

.main-container,
.el-container {
    width: 100%;
    height: 100%;
}

// 侧边栏
.el-aside {
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
}

// 侧边菜单导航
.el-menu {
    height: 100%;
    border: 0;
}

// 侧边栏标题
.app-tag {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #323b45;
    color: #fff;
    font-size: 18px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    cursor: pointer;
}

// 右侧主体盒子
.mian-right-box {
    margin: 0 5px;
}

// 头部
.el-header {
    width: 100%;
    height: 50px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    line-height: 50px;
    margin-bottom: 5px;
}

.el-main {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background-color: #fff;
}

.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-utils {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100px;
    height: 50px;
    padding: 0 10px;
    cursor: pointer;
}

.block:hover {
    background-color: rgb(80, 130, 196);
    color: #fff;
}

.login-out {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85px;
    height: 50px;
    padding: 0 10px;
    cursor: pointer;
}

.login-out:hover {
    background-color: rgb(206, 79, 79);
    color: #fff;
}
</style>